<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view style="height: 20px;;"></view>
		<view @click="goPage($event)" data-uri="/pages/_test/_test" data-type="0">
		   查看示例
		</view>
		<view style="height: 20px;;">{{$vuex.state.globalData.tabBar.list}}</view>
		<u-icon name="file-text"></u-icon>
		<loading :loading="not_load"/><!--加载状态-->
		<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
		<check-network /><!--检测网络-->
		<u-tabbar v-model="$vuex.state.globalData.tabBar.current" :list="$vuex.state.globalData.tabBar.list" active-color="#01b9b7" :mid-button="false"></u-tabbar><!--自定义底部导航-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(false);
const not_load=ref(false);
const page_load=ref(false);
const next_page=ref(null);
const list=ref([]);
const title=ref('');

//页面加载时
onLoad(async (options)=>{

	console.log(uni.$utils.getUuid());
	//改变模板值
	title.value='测试标题';
	console.log('语法糖onLoad');
	//动态改变APP标题
	uni.setNavigationBarTitle({ title: '任务大厅' });
	//获取vuex全局变量
	uni.$vuex.state.globalData.test=55555; //改变值
	console.log(uni.$vuex.state.globalData.test);//获取值
	//调用工具函数
	uni.$utils.showToast(1111);
	
	//加载页面数据
	loadPage(options,false);
	
	//获取用户设置
	//let info=await uni.$utils.getSystemInfo();
	//console.log(info);
	
	//获取位置
	//let location=await uni.$utils.getLocation();
	//console.log(location,2);
	/* 动态改变导航未读数
	setTimeout(()=>{
		store.state.globalData.tabBar.list[1].count=10;
	},5000);*/
    //同步获取用户设备
    console.log(uni.getDeviceInfo());
    //同步获取用户操作平台
    console.log(uni.getDeviceInfo().platform);
    //同步获取用户系统操作平台：
    console.log(uni.getDeviceInfo().osVersion);
});
//页面显示时执行
onShow(()=>{
	console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	console.log('语法糖onHide');
});
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
//下拉更新
onPullDownRefresh(()=>{
	console.log('onPullDownRefresh');
	setTimeout(()=>{
		loadPage({},false);
		uni.stopPullDownRefresh();
	}, 1000);
});
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
async function loadPage(options,isPage){
	let ret = await uni.$get('index/index',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
	show_main.value=true;
	not_load.value=true;
	page_load.value=false;
	next_page.value=ret.data.next_page;
	let listData=ret.data.list;
	if(isPage) listData=list.value.concat(listData);
	list.value=listData;
};
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};
//测试事件函数
function clickTest(e){
	console.log(e);
}
</script>

<style  lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
